#include("common.html")
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/vant.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
        <style type="text/css">
    


    .mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
    </style>
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/mui/css/mui.css"/>
	<link rel="stylesheet" type="text/css" href="#(tpath)/static/mui/css/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="#(tpath)/static/mui/css/mui.poppicker.css" />
    <script type="text/javascript" src="#(tpath)/static/js/jquery.js"></script>
    <script type="text/javascript" src="#(tpath)/static/js/common.js"></script>
    <script type="text/javascript" src="#(tpath)/static/mui/js/mui.js"></script>
    <script type="text/javascript" src="#(tpath)/static/mui/js/mui.picker.js"></script>
    <script type="text/javascript" src="#(tpath)/static/mui/js/mui.poppicker.js"></script>
    <script type="text/javascript" src="#(tpath)/static/mui/js/city.data-3.js"></script>
  </head>
  
  <body class="">
    <style type="text/css">@media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }</style>
    <!-- 样式 S -->
    <style>.fl{float:left;} .fr{float:right;} .cl{clear:both;} ::-webkit-input-placeholder {color: #999;} .container{background:#ffffff;padding:3%;} .container .title{color:#333333;font-size:16px} .paste-addres{width:100%;height:90px;background:#f5f5f5;padding:10px;margin-top:10px;box-sizing: border-box;} .container .inter-rec{width:90%;height:40px;background:#f5f5f5;border:none;} .receiver-input{margin-top:5px;} .receiver-input .receiver-name{width:48%;height:40px;border-bottom:1px solid #f5f5f5;font-size:12px;border-top:none;border-left:none;border-right:none;} .receiver-input .receiver-area{width:100%;height:40px;border-bottom:1px solid #f5f5f5;font-size:12px;border-top:none;border-left:none;border-right:none;} .reminder{background:#f4f4f5;width:96%;padding:2%;margin-top:10px;font-size:12px;color:#909399;} .reminder .reminder-icon{width:7%;margin-top:2px} .reminder .reminder-text{width:92%;font-size:12px;} .submit-btn{border:none;color:#ffffff;width:100%;font-size:16px;height:40px;margin-top:10px;} .upload-icard{margin-top:10px;} .upload-icard .front{width:48%;height:112px;} .upload-icard .back{width:48%;height:112px;} .span-right{span-align:right;} .upoload-examle{margin-top:10px;margin-bottom:10px} .upoload-examle span{font-size:12px;color:#cccccc;} .paste-addres .button-style{background:#333333;color:#ffffff;font-size:12px;border-radius:3px;padding:5px 10px;border:none;}</style>
    <!-- 内容 -->
    <header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<a href="#(base)/member/receiver" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收货地址</h1>
		</header>
      <div class="mui-content" style="background-color: #ffffff;">
			<form id='login-form' class="mui-input-group">
				<input type="hidden" id="receiverId" value="#if(receiver??)#(receiver.id)#end">
				<div class="mui-input-row">
					<label>姓名</label>
					<input id="consignee" value="#if(receiver??)#(receiver.consignee)#end" type="text" class="mui-input-clear mui-input" placeholder="请输入收货人姓名">
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<input id="phone" value="#if(receiver??)#(receiver.phone)#end" type="text" class="mui-input-clear mui-input" placeholder="请输入收件人手机号">
				</div>
				<div class="mui-input-row">
					<label>地区</label>
					<input id="addressPicker" value="#if(receiver??)#(receiver.province)#(receiver.city)#(receiver.district)#end" readonly="readonly" type="text" class="mui-input-clear mui-input" placeholder="请选择收件人地区">
				</div>
				<div class="mui-input-row">
					<label>地址</label>
					<input id="address" value="#if(receiver??)#(receiver.address)#end" type="text" class="mui-input-clear mui-input" placeholder="街道、楼层、门牌号等">
				</div>
			</form>
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-block mui-btn-primary" id="receiverBtn" receiverId="#if(receiver??)#(receiver.id)#end">保存</button>
			#if(receiver??)
			<button type="button" class="mui-btn mui-btn-block mui-btn-danger" id="deleteBtn" receiverId="#if(receiver??)#(receiver.id)#end">删除</button>
			#end
			</div>
		</div>
    <!-- 底部内容-->
  </body>
</html>
<script type="text/javascript" src="#(tpath)/static/js/load.js"></script>
 <script type="text/javascript">
// 显示三级联动
(function($, doc) {
	$.init();
	$.ready(function() {
		if(!doc.getElementById('addressPicker')){
			return;
		}
		var userPicker = new mui.PopPicker({
			//三级联动
			layer: 3
		});
		userPicker.setData(cityData3);
		var showUserPickerButton = doc.getElementById('addressPicker');
		showUserPickerButton.addEventListener('tap', function(event) {
			userPicker.show(function(items) {
				var html = '';
				if(items[0]){
					html+=items[0].text+",";
				}
				if(items[1]){
					html+=items[1].text+",";
				}
				if(items[2]){
					html+=items[2].text;
				}
				showUserPickerButton.value=html;
			});
		}, false);
	});
})(mui, document);

</script>   
<script>
    
    $("#deleteBtn").on("click",function(){
    	var receiverId = $("#receiverId").val();
    	$.ajax({
            url: "#(base)/member/receiver/delete",
            type: "post",
            data: {
            	"id":receiverId
           	},
            dataType: "json",
            success: function(res){
            	if(res.type=="success"){
            		location.href="#(base)/member/receiver"
           		}
            },
            error: function(res){
            }
        });
    	
    	
    });
    
    $("#receiverBtn").on("click",function(){
    	var consignee = $("#consignee").val();
    	
    	if(isEmpty(consignee)){
    		alert("请输入收货人姓名");
    		return;
    	}
    	var phone = $("#phone").val();
    	
    	if(isEmpty(phone)){
    		alert("请输入收货人手机号码");
    		return;
    	}
    	var phoneReg = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
    	if (!phoneReg.test(phone)) {
    		alert("请输入正确的手机号码");
    		return;
    	}
    	
    	var area = $("#addressPicker").val();
    	if(area==""){
    		alert("请选择所在地区");
    		return;
    	}
    	var province = area.split(",")[0];
    	var city = area.split(",")[1];
    	var district = area.split(",")[2];
    	var address = $("#address").val();
    	if(isEmpty(address)){
    		alert("请输入详细地址");
    		return;
    	}
    	var receiverId = $(this).attr("receiverId");
    	var url="";
    	if(receiverId==""){
    		url="#(base)/member/receiver/save";
    	}else{
    		url="#(base)/member/receiver/update";
    	}
    	$.ajax({
            url: url,
            type: "post",
            data: {
            	"consignee":consignee,
            	"phone":phone,
            	"province":province,
            	"city":city,
            	"district":district,
            	"address":address,
            	"id":receiverId
           	},
            dataType: "json",
            success: function(res){
            	if(res.type=="success"){
           			location.href="#(base)/member/receiver"
           		}
            },
            error: function(res){
            }
        });
    });
</script>